<div ng-init="init()">
	<div class="modal-header">
		<h3 class="modal-title">Roll-up Query</h3>
	</div>
	<div class="modal-body">
		<div class="editor-row" style="margin-top: 10px;">
			<div class="tight-form-container">

				<!-- METRIC NAME -->
				<div class="tight-form">
					<ul class="tight-form-list" role="menu">
						<li class="tight-form-warning">
							<i class="fa invisible"
							   ng-show="!errors.metric">i</i>
							<a bs-tooltip="errors.metric"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.metric">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>

						<input type="text"
							   class="input-large tight-form-input ng-pristine ng-valid ng-touched"
							   ng-model="target.metric" spellcheck="false"
							   bs-typeahead
							   bs-options="metric for metric in suggestMetrics()"
							   placeholder="metric name" min-length="0"
							   limit="METRIC_NAME_LIST_MAX_LENGTH"
							   ng-change="targetBlur()"
							   ng-blur="suggestSaveAs()"
							   data-provide="typeahead"
							   autofocus>
					</ul>
					<div class="clearfix"></div>
				</div>

				<!-- SAVE AS NAME -->
				<div class="tight-form">
					<ul class="tight-form-list" role="menu">
						<li class="tight-form-warning">
							<i class="fa invisible"
							   ng-show="!errors.save_as">i</i>
							<a bs-tooltip="errors.save_as"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.save_as">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>

						<input type="text"
							   class="input-large tight-form-input ng-pristine ng-valid ng-touched"
							   ng-model="target.save_as" spellcheck="false"
							   ng-click="clearSaveAs()"
							   ng-class="(target.save_as == 'Save As') ? 'placeholder' : ''"
							   ng-change="targetBlur()">
					</ul>
					<div class="clearfix"></div>
				</div>

				<!-- TAGS  filtering -->
				<div class="tight-form">
					<ul class="tight-form-list" role="menu">
						<li class="tight-form-warning">
							<i class="fa invisible" ng-show="!errors.tags">i</i>
							<a bs-tooltip="errors.tags"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.tags">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>

						<li class="tight-form-item"
							style="border-left: 1px solid #050505;">
							Tags:
						</li>
						<li ng-repeat="(key, value) in target.tags track by $index"
							class="tight-form-item">
							{{key}}&nbsp;=&nbsp;{{value}}
							<a ng-click="removeFilterTag(key)">
								<i class="glyphicon glyphicon-remove"></i>
							</a>
						</li>

						<li class="tight-form-item"
							ng-hide="addFilterTagMode">
							<a ng-click="addFilterTag()">
								<i class="glyphicon glyphicon-plus-sign"></i>
							</a>
						</li>

						<li ng-show="addFilterTagMode">
							<input type="text"
								   class="input-small tight-form-input"
								   spellcheck='false'
								   bs-typeahead
								   bs-options="key for key in suggestTagKeys()"
								   ng-change="validateFilterTag()"
								   data-min-length=0 data-items=100
								   ng-model="target.currentTagKey"
								   placeholder="key"/>
						</li>
						<li ng-show="addFilterTagMode">
							<input type="text"
								   class="input-small tight-form-input"
								   spellcheck='false'
								   bs-typeahead
								   bs-options="value for value in suggestTagValues()"
								   ng-change="validateFilterTag()"
								   data-min-length=0 data-items=100
								   ng-model="target.currentTagValue"
								   placeholder="value"/>
						</li>

						<li class="tight-form-item" ng-show="addFilterTagMode">
							<a ng-click="addFilterTag()">
								<i ng-show="errors.tags"
								   class="glyphicon glyphicon-remove"></i>
								<i ng-hide="errors.tags"
								   class="glyphicon glyphicon-plus-sign"></i>
							</a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>

				<!-- GROUP BYS -->
				<div class="tight-form">
					<ul class="tight-form-list" role="menu">
						<li class="tight-form-warning">
							<i class="fa invisible">i</i>
						</li>
						<li class="tight-form-item"
							style="border-left: 1px solid #050505;">
							Group by:
						</li>

						<li class="tight-form-item"
							ng-show="target.groupByTags">
							tags:
						</li>

						<li ng-repeat="key in target.groupByTags track by $index"
							class="tight-form-item">
							{{key}}
							<a ng-click="removeGroupByTag($index)">
								<i class="glyphicon glyphicon-remove"></i>
							</a>
						</li>


						<li class="tight-form-item"
							ng-show="target.groupByTags && target.nonTagGroupBys">
							and by:
						</li>

						<li ng-repeat="groupByObject in target.nonTagGroupBys track by $index"
							class="tight-form-item">
							{{getValues(groupByObject)}}
							<a ng-click="removeNonTagGroupBy($index)">
								<i class="glyphicon glyphicon-remove"></i>
							</a>
						</li>

						<li class="tight-form-item" ng-hide="addGroupByMode">
							<a ng-click="addGroupBy()">
								<i class="glyphicon glyphicon-plus-sign"></i>
							</a>
						</li>
						<li ng-show="addGroupByMode">
							<select class="input-small tight-form-input"
									ng-change="changeGroupByInput()"
									ng-model="target.currentGroupByType"
									ng-options="f for f in ['tag','value','time']"></select>
						</li>
						<li ng-show="isTagGroupBy">
							<input type="text"
								   class="input-small tight-form-item-input"
								   spellcheck='false'
								   bs-typeahead
								   bs-options="key for key in suggestTagKeys()"
								   ng-change="validateGroupBy()"
								   data-min-length=0 data-items=100
								   ng-model="target.groupBy.tagKey"
								   placeholder="key">
							<a bs-tooltip="errors.groupBy.tagKey"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.groupBy.tagKey">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>
						<li ng-show="isValueGroupBy">
							<input type="text"
								   class="input-mini tight-form-input"
								   spellcheck='false'
								   ng-model="target.groupBy.valueRange"
								   placeholder="range"
								   bs-tooltip="'Range on which values are considered in the same group'"
								   ng-change="validateGroupBy()">
							<a bs-tooltip="errors.groupBy.valueRange"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.groupBy.valueRange">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>
						<li ng-show="isTimeGroupBy">
							<input type="text"
								   class="input-mini tight-form-input"
								   ng-model="target.groupBy.timeInterval"
								   ng-init="target.groupBy.timeInterval='1s'"
								   placeholder="interval"
								   bs-tooltip="'Duration of time groups'"
								   spellcheck='false'
								   ng-change="validateGroupBy()">
							<a bs-tooltip="errors.groupBy.timeInterval"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.groupBy.timeInterval">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>
						<li ng-show="isTimeGroupBy">
							<input type="text"
								   class="input-mini tight-form-input"
								   ng-model="target.groupBy.groupCount"
								   placeholder="Count"
								   bs-tooltip="'Number of time groups to be formed'"
								   spellcheck='false'
								   ng-change="validateGroupBy()">
							<a bs-tooltip="errors.groupBy.groupCount"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.groupBy.groupCount">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>
						<li class="tight-form-item" ng-show="addGroupByMode">
							<a ng-click="addGroupBy()">
								<i ng-hide="isGroupByValid"
								   class="glyphicon glyphicon-remove"></i>
								<i ng-show="isGroupByValid"
								   class="glyphicon glyphicon-plus-sign"></i>
							</a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>

				<!-- HORIZONTAL AGGREGATION -->
				<div class="tight-form">
					<ul class="tight-form-list" role="menu">
						<li class="tight-form-warning">
							<i class="fa invisible"
							   ng-show="!errors.aggregators">i</i>
							<a bs-tooltip="errors.aggregators"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.aggregators">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>

						<li class="tight-form-item"
							style="border-left: 1px solid #050505;">
							Aggregation:
						</li>
						<li ng-repeat="aggregatorObject in target.horizontalAggregators track by $index"
							class="tight-form-item">
							{{aggregatorObject.name}}&#40;
						<span ng-repeat="aggKey in getAggregatorKeys(aggregatorObject)"
							  bs-tooltip="aggKey">
							{{$last?aggregatorObject[aggKey]:aggregatorObject[aggKey]+","}}
						</span>
							&#41;
							<a ng-click="removeHorizontalAggregator($index)">
								<i class="glyphicon glyphicon-remove"></i>
							</a>
						</li>

						<li class="tight-form-item"
							ng-hide="addHorizontalAggregatorMode">
							<a ng-click="addHorizontalAggregator()">
								<i class="glyphicon glyphicon-plus-sign"></i>
							</a>
						</li>

						<li ng-show="addHorizontalAggregatorMode">
							<select class="input-medium tight-form-input"
									ng-change="changeHorAggregationInput()"
									ng-model="target.currentHorizontalAggregatorName"
									ng-options="f for f in ['avg','dev','max','min','rate','sampler','count','sum','least_squares','percentile','scale','div']"></select>
						</li>

						<!-- Different parameters -->
						<li ng-show="hasSamplingRate"
							class="tight-form-item">
							every
						</li>
						<li ng-show="hasSamplingRate">
							<input type="text"
								   class="input-mini tight-form-input"
								   ng-model="target.horAggregator.samplingRate"
								   ng-init="target.horAggregator.samplingRate='1s'"
								   spellcheck='false'
								   ng-change="validateHorizontalAggregator()">
							<a bs-tooltip="errors.horAggregator.samplingRate"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.horAggregator.samplingRate">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>
						<li class="tight-form-item" ng-show="hasSamplingRate"
							bs-tooltip="'Align samples to range start times'">
							&nbsp;align Start&nbsp;
							<input class="tight-form-checkbox"
								   type="checkbox"
								   ng-init="target.horAggregator.alignStartTime=true"
								   ng-model="target.horAggregator.alignStartTime">
						</li>
						<li class="tight-form-item" ng-show="hasSamplingRate"
							bs-tooltip="'Align samples based on the sampling size'">
							&nbsp;align Sampling&nbsp;
							<input class="tight-form-checkbox"
								   type="checkbox"
								   ng-init="target.horAggregator.alignSampling=false"
								   ng-model="target.horAggregator.alignSampling">
						</li>

						<li ng-show="hasUnit" class="tight-form-item">
							every
						</li>
						<li ng-show="hasUnit">
							<select class="input-medium tight-form-input"
									ng-model="target.horAggregator.unit"
									ng-init="target.horAggregator.unit='millisecond'"
									ng-options="f for f in ['millisecond','second','minute','hour','day','week','month','year']"></select>
							<!-- todo add to model rather than hard code -->
						</li>

						<li ng-show="hasFactor" class="tight-form-item">
							by
						</li>
						<li ng-show="hasFactor">
							<input type="text"
								   class="input-mini tight-form-input"
								   ng-model="target.horAggregator.factor"
								   ng-init="target.horAggregator.factor='1'"
								   spellcheck='false'
								   ng-change="validateHorizontalAggregator()">
							<a bs-tooltip="errors.horAggregator.factor"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.horAggregator.factor">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>

						<li ng-show="hasPercentile" class="tight-form-item">
							percentile
						</li>
						<li ng-show="hasPercentile">
							<input type="text"
								   class="input-mini tight-form-input"
								   ng-model="target.horAggregator.percentile"
								   ng-init="target.horAggregator.percentile='0.75'"
								   spellcheck='false'
								   ng-change="validateHorizontalAggregator()">
							<a bs-tooltip="errors.horAggregator.percentile"
							   style="color: rgb(229, 189, 28)"
							   ng-show="errors.horAggregator.percentile">
								<i class="glyphicon glyphicon-warning-sign"></i>
							</a>
						</li>

						<li class="tight-form-item"
							ng-show="addHorizontalAggregatorMode">
							<a ng-click="addHorizontalAggregator()">
								<i ng-hide="isAggregatorValid"
								   class="glyphicon glyphicon-remove"></i>
								<i ng-show="isAggregatorValid"
								   class="glyphicon glyphicon-plus-sign"></i>
							</a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>


			</div>
		</div>

	</div>

	<div class="modal-footer">
		<button class="btn btn-primary" type="button" ng-click="ok()"
				ng-disabled="hasErrors()">OK
		</button>
		<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel
		</button>
	</div>
</div>
